import React, {useEffect, useRef, useState} from "react";
import {Button, Form, message, PageHeader, Select, Steps} from "antd";
import style from "./News.module.css";
import Input from "antd/es/input/Input";
import NewsEditor from "../../../components/news-manage/NewsEditor";
import axios from "axios";

const {Step} = Steps
const {Option} = Select
export default function NewsUpdate(props) {
    const [currentStep,setCurrentStep] = useState(0)
    const [categoryList, setCategoryList] = useState([])
    const [formInfo, setFormInfo] = useState({})
    const [content, setContent] = useState({})
    const user = JSON.parse(localStorage.getItem("token"))
    const next = () => {
        if (currentStep === 0) {
            NewsForm.current.validateFields().then(res => {
                setFormInfo(res)
            }).catch(err => {
                console.log(err)
            })
        }
        if (content === "") {
            message.error("内容不得为空")
        }
        setCurrentStep(currentStep + 1);
    }
    const back = () => {
        setCurrentStep(currentStep - 1)
    }
    const handleSave = (auditState) => {
        axios.patch(`http://localhost:5000/news/${props.match.params.id}`, {
            ...formInfo,
            "content": content,
            "region": user.region ? user.region : "全球",
            "auditState": auditState,
        }).then(res => {
            props.history.push(auditState === 0 ? '/news-manage/draft' : '/audit-manage/list')
        })
    }
    useEffect(async () => {
        let res = await axios.get(`http://localhost:5000/categories`)
        setCategoryList(res.data)
    }, [])
    useEffect(async () => {
        let res = await axios.get(`http://localhost:5000/news/${props.match.params.id}?_expand=category&_expand=role`)
        let {title, categoryId, content} = res.data
        NewsForm.current.setFieldsValue({
            title,
            categoryId
        })
        setContent(content)
        console.log("content:",content)
    }, [props.match.params.id])
    const NewsForm = useRef(null)
    return (
        <div>
            <PageHeader
                className="site-page-header"
                title="更新新闻"
                onBack={() => {
                    props.history.goBack()
                }}
            />
            <Steps current={currentStep}>
                <Step title="基本信息" description="新闻标题,新闻分类"/>
                <Step title="新闻内容" description="新闻主体内容"/>
                <Step title="新闻提交" description="保存草稿或提交审核"/>
            </Steps>

            <div className={currentStep === 0 ? "" : style.active}>
                <Form
                    name="basic"
                    labelCol={{span: 2}}
                    wrapperCol={{span: 22}}
                    autoComplete="off"
                    style={{marginTop: "30px"}}
                    ref={NewsForm}
                >
                    <Form.Item
                        label="新闻标题"
                        name="title"
                        rules={[{required: true, message: '新闻标题不可为空!'}]}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        label="新闻分类"
                        name="categoryId"
                        rules={[{required: true, message: '新闻分类不可为空!'}]}
                    >
                        <Select>
                            {
                                categoryList.map(item => {
                                    return (
                                        <Option value={item.id} key={item.id}>{item.title}</Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>

                </Form>
            </div>
            <div className={currentStep === 1 ? "" : style.active}>
                <NewsEditor getContent={(value) => {
                    // setContent(value)
                    console.log('value:',value)
                }} content={content}/>
            </div>
            <div className={currentStep === 2 ? "" : style.active}>333333</div>

            <div style={{marginTop: "60px"}}>
                {
                    currentStep > 0 && <Button type={"primary"} onClick={back}>上一步</Button>
                }
                {
                    currentStep < 2 && <Button type={"primary"} onClick={next}>下一步</Button>
                }
                {
                    currentStep === 2 && <span>
                        <Button type={"primary"} onClick={() => handleSave(0)}>保存至草稿箱</Button>
                        <Button type={"primary"} onClick={() => handleSave(1)}>提交审核</Button>
                    </span>
                }
            </div>
        </div>
    )

}
